<template>
  <page-header-wrapper>
    <div class="page-card">
      <h-query hideTab :showKey="['startTime,endTime']" :query="query" @search="search">

      </h-query>
    </div>
    <a-card :bordered="false">
      <div class="a-button-right">
        <a-button type="primary" @click="add">添 加</a-button>
      </div>
      <h-table
        ref="htable"
        @init="getList"
        :config="config"
        :showHeadBgNone="true"
        :zebraStripes="true">
        <span slot="type" slot-scope="{text}">
          {{ type[text] }}
        </span>
        <span slot="dutyStatus" slot-scope="{text}">
          <span class="red" v-if="text == 1">未采纳</span>
          <span class="green" v-else-if="text == 0">已采纳</span>
        </span>
        <span slot="action" slot-scope="{text, record}" v-if="record.dutyStatus == 1 || isAdminAction">
          <!-- <a @click="look(record)">查看</a>
          <a-divider type="vertical"></a-divider> -->
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"></a-divider>
          <a @click="remove(record)" class="red">删除</a>
        </span>
      </h-table>
    </a-card>

    <a-modal :footer="null" v-model="showModal">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
        <a-row :gutter="100">
          <!-- <a-col :span="24">
            <a-form-model-item label="时间" >
              <span style="font-size: 16px">{{ moment(new Date()).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="风险点" prop="title">
              <a-select v-model="form.riskPoint" size="large" placeholder="请选择">
                <a-select-option :value="el" v-for="(el) in typeList" :key="el">{{ el }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="事项" prop="matters">
              <a-textarea style="width: 100%" size="large" v-model="form.matters" placeholder="请输入事项"></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="分析研判" prop="analysisJudge">
              <a-textarea style="width: 100%" size="large" v-model="form.analysisJudge" placeholder="请输入分析研判"></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="address.length">
            <a-form-model-item label="属地" prop="territory">
              <a-select v-model="form.territory" size="large" placeholder="请选择">
                <a-select-option v-for="el in address" :value="el.title" :key="el.title">{{ el.title }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="isUpdateAdminAction">
            <a-form-model-item label="状态" prop="dutyStatus">
              <a-select v-model="form.dutyStatus" size="large" placeholder="请选择">
                <a-select-option :value="0">已采纳</a-select-option>
                <a-select-option :value="1">未采纳</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="" >
              <a-button type="primary" @click="submit">提 交</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>

      </a-form-model>
    </a-modal>

  </page-header-wrapper>

</template>
<script>
import moment from 'moment';
import { getClueEvent, addClueEvent, address, updateClueEvent, delClueEvent } from '@/api/serve';
import {ACCESS_INFO} from '@/store/mutation-types'
import storage from 'store'
import { mapState } from 'vuex'

const typeList = [
  '涉网络意识形态负面信息',
  '涉苗头性、倾向性、行动性有害信言',
  '近期出台重大政策',
  '近期举办重大活动/工作',
  '近期实施重大工程',
  '近期审理重大案件',
  '近期活跃重点群体',
  '其他'
];

const defaultOption = [{
  label: '全部',
  value: ''
}];

export default {
  props: {

  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {

  },
  data() {
    return {
      showModal: false,
      moment,
      show: false,
      form: {
        dutyStatus: 1,
        territory: ''
      },
      address: [],
      typeList,
      rules: {
        riskPoint: [{ required: true, message: '请输入' }],
        matters: [{ required: true, message: '请输入' }],
        analysisJudge: [{ required: true, message: '请输入' }],
        territory: [{ required: false, message: '请输入' }],
        // analysisJudge: [{ required: true, message: '请输入' }],
      },
      queryParams: {},
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'order',
          },
          {
            align: 'center',
            title: '风险点',
            dataIndex: 'riskPoint',
            ellipsis: true,
            width: 200

          },
          {
            align: 'center',
            title: '事项',
            dataIndex: 'matters',
          },
          {
            align: 'center',
            title: '分析研判',
            dataIndex: 'analysisJudge',
          },
          {
            align: 'center',
            title: '属地',
            dataIndex: 'territory',
          },
          {
            align: 'center',
            title: '记录日期',
            dataIndex: 'createTime',
          },
          {
            align: 'center',
            title: '状态',
            dataIndex: 'dutyStatus',
            scopedSlots: { customRender: 'dutyStatus' }

          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          total: 0
        }
      },
      query: [
      // {
      //     key: 'riskPoint',
      //     type: 'select',
      //     label: '风险点',
      //     options: defaultOption.concat(typeList.map(e => {
      //       return {
      //         label: e,
      //         value: e
      //       };
      //     }))
      //   },
      //   {
      //     key: 'matters',
      //     type: 'input',
      //     label: '事项'
      //   },
      //   {
      //     key: 'analysisJudge',
      //     type: 'input',
      //     label: '分析研判'
      //   },
      //   {
      //     key: 'territory',
      //     type: 'select',
      //     label: '属地',
      //     options: []
      //   },
        {
          key: 'dutyStatus',
          type: 'select',
          label: '状态',
          options: [{
            label: '全部',
            value: ''
          },
          {
            label: '已采纳',
            value: 0
          },
          {
            label: '未采纳',
            value: 1
          }]
        }
      ]
    };
  },
  computed: {
    ...mapState({
      modelName: state => state.user.modelName,
    }),
    isAdminAction() {
      return this.modelName.includes('上报⽹络舆情⻛险点-可编辑删除')
    },
    isUpdateAdminAction() {
      return this.modelName.includes('上报⽹络舆情⻛险点-可修改上报状态')
    },
  },
  created() {
    this.getAddress()
  },
  methods: {
    getList(params) {
      // const { current, pageSize } = params;
      Object.assign(this.queryParams, params);
      getClueEvent(this.queryParams).then(res => {
        this.config.dataSource = res.data.records.map((e, i) => {
          return {
            ...e,
            order: i + 1
          };
        });
        this.config.pagination.total = res.data.total;

      });
    },
    search(params) {
      Object.assign(this.queryParams, params);
      this.$refs.htable.refresh();
    },
    getAddress() {
      address().then(res => {
        // this.query[3].options = defaultOption.concat(res.data.map(e => {
        //   return {
        //     label: e.title,
        //     value: e.title
        //   };
        // }));

        // const arr = res.data.map(e => {
        //   return {
        //     title: e.title,
        //     value: e.title
        //   }
        // })

        // this.address = res.data;
        const arr = []
        const territory = storage.get(ACCESS_INFO).territory
        // 截取前两位
        let _territory = territory.substring(0, 2)
        console.log('territory',_territory)
        const find = res.data.find(e => e.title.includes(_territory))
        if (find) {
          arr.push({
            title: find.title,
            value: find.title
          })
          arr.push({
            title: '属地未知',
            value: '属地未知'
          })
        }
        this.address = arr
        if (arr.length === 0) {
          this.form.territory = this.address[0].value
        }
      });
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateClueEvent(this.form).then(res => {
              this.showModal = false
              this.$message.success('修改成功');
              // this.$emit('submit');
              this.$refs.htable.refresh();
            });
          } else {
            addClueEvent(this.form).then(res => {
              this.showModal = false
              this.$message.success('创建成功');
              // this.$emit('submit');
              this.$refs.htable.refresh();
            });
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    add() {
      this.form = {
        dutyStatus: 1,
        territory: ''
      }
      if (this.address.length > 0) {
        this.form.territory = this.address[0].value
      }
      this.showModal = true
    },
    edit(record) {
      this.form = {...record}
      this.showModal = true
    },
    remove({id}) {
      delClueEvent({id}).then(res => {
        this.$message.success('删除成功');
        this.$refs.htable.refresh();
      })
    }
  }
};
</script>
